<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="car-top">
    <span class="car-tlt">换车记录{{ props.index + 1 }}</span>
    <div class="car-open" @click="showRecord">{{ carShow ? '收起' : '展开' }} <icon-down v-if="!carShow" /><icon-up v-if="carShow" /></div>
  </div>
  <div class="car">
    <div class="car-item">
      <div class="car-msg">
        <div class="car-updown">
          <span class="lic">
            换下车牌号：{{ detail[0].licenseNo }}
            <a-tag color="red" v-if="detail[0].orderCarLabel">{{ detail[0].orderCarLabel }}</a-tag>
          </span>
          <span class="model">{{ detail[0].carModelName }}</span>
        </div>
        <a-divider direction="vertical" :margin="20" style="height: 63px" />
        <div class="car-updown">
          <span class="lic">
            换上车牌号：{{ detail[1].licenseNo }}
            <a-tag color="red" v-if="detail[1].orderCarLabel">{{ detail[1].orderCarLabel }}</a-tag>
          </span>
          <span class="model">{{ detail[1].carModelName }}</span>
        </div>
      </div>
      <a-divider />
      <div class="member-msg">
        <div class="msg-tlt"><span>换车人：</span>{{ detail[1].giveStaffName || '-' }}</div>
        <div class="msg-tlt"><span>换车人联系电话：</span>{{ detail[1].replaceStaffPhone || '-' }}</div>
        <div class="msg-tlt">
          <span>换车时间：</span>
          <span>
            <span v-if="isChangeTime">
              <i-date-picker
                v-model="changeOfTime"
                show-time
                format="YYYY-MM-DD HH:mm"
                valueFormat="YYYY-MM-DD HH:mm:00"
                :time-picker-props="{
                  format: 'HH:mm',
                  defaultValue: '00:00',
                }"
              />
            </span>
            <span v-else>{{ changeOfTime || '-' }}</span>
          </span>
          <template v-if="time_change_disabled">
            <a-link v-if="!isChangeTime" class="ml-1" @click="isChangeTime = true" style="color: #1890ff"> 修改 <icon-right /> </a-link>
            <a-link v-else class="ml-1" @click="handleChangeTime" style="color: #1890ff"> 确认修改 </a-link>
          </template>
        </div>
        <div class="msg-tlt msg-remark">
          <span>换车备注：</span>{{ detail[1].useStartRemark || '-' }}
          <a-link @click="showRemarkModel" style="color: #1890ff"> 修改备注 </a-link>
        </div>
      </div>
    </div>
    <a-divider v-if="carShow" />
    <div class="flex">
      <div class="section-item w-1/2 mr-5" v-if="carShow">
        <div class="section-item-header">换下车信息</div>
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }" :label-style="{ verticalAlign: 'top' }" :column="2">
            <a-descriptions-item :span="2" label="换下车牌号">{{ detail[0].licenseNo }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="换下车型">{{ detail[0].carModelName }}</a-descriptions-item>
            <a-descriptions-item :span="1">
              <template #label></template>
              <span></span>
            </a-descriptions-item>
            <a-descriptions-item :span="1" label="换下车里程">{{ unitVal(detail[0].endCarMileage, '公里') }}</a-descriptions-item>
            <a-descriptions-item :span="1" label="换下车油(电)量">{{ detail[0].endCarOil }}</a-descriptions-item>
            <a-descriptions-item :span="1">
              <template #label></template>
              <div></div>
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="换下车里程/油(电)量照片">
              <upload-img v-model="detail[0].returnMilesFileId" disabled margin />
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="换下车照片">
              <upload-img v-model="detail[0].returnFileIds" disabled margin />
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="换下车视频">
              <upload-video v-model="detail[0].returnVideoFileIds" :max="1" disabled />
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="section-item w-1/2" v-if="carShow">
        <div class="section-item-header">换上车信息</div>
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }" :label-style="{ verticalAlign: 'top' }" :column="2">
            <a-descriptions-item :span="2" label="换上车牌号">{{ detail[1].licenseNo }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="换上车型">{{ detail[1].carModelName }}</a-descriptions-item>
            <a-descriptions-item :span="1">
              <template #label></template>
              <div></div>
            </a-descriptions-item>
            <a-descriptions-item :span="1" label="换上车里程">{{ unitVal(detail[1].startCarMileage, '公里') }}</a-descriptions-item>
            <a-descriptions-item :span="1" label="换上车油（电）量">{{ detail[1].startCarOil }}</a-descriptions-item>
            <a-descriptions-item :span="1">
              <template #label></template>
              <div></div>
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="换上车里程/油(电)量照片">
              <upload-img v-model="detail[1].giveMilesFileId" disabled margin />
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="换上车照片">
              <upload-img v-model="detail[1].giveFileIds" disabled margin />
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="换上车视频">
              <upload-video v-model="detail[1].giveVideoFileIds" :max="1" disabled />
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
  <a-modal title="修改备注" width="45vw" v-model:visible="remarkVisible">
    <page-form-item label="换车备注" size="1">
      <i-input placeholder="请输入" :max-length="200" v-model="replaceRemark" />
    </page-form-item>
    <template #footer>
      <a-button @click="remarkVisible = false">关闭</a-button>
      <a-button type="primary" @click="submitRemark">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="ShortOrderChangeCarItem">
  import { updateRemarkLogApi, updateChangeCarTime } from '@/api/order/sOrder'
  import { Message } from '@arco-design/web-vue'
  import { unitVal } from '@/utils'
  import { ref, inject, watchEffect } from 'vue'

  const props = defineProps({
    index: Number,
    detail: Array,
    orderId: Number,
  })

  const getShortOrderDetail = inject('getShortOrderDetail')
  const time_change_disabled = ref(false)
  watchEffect(() => {
    if (getShortOrderDetail && getShortOrderDetail.value) {
      // channelOrderMaintenance 1：自动维护 2：手动维护
      // orderStatus 200: 用车中
      const isMaintenance =
        getShortOrderDetail.value.orderSource == 1 ||
        (getShortOrderDetail.value.orderSource == 2 && getShortOrderDetail.value.channelOrderMaintenance == 2)
      const isCompleted = getShortOrderDetail.value.orderStatus == 200
      if (isMaintenance && isCompleted) {
        time_change_disabled.value = true
      } else {
        time_change_disabled.value = false
      }
    }
  })

  const emit = defineEmits(['getRemarkLists'])
  const carShow = ref(false)
  console.log('xxxxx', props.detail)
  const showRecord = () => {
    carShow.value = !carShow.value
  }

  const isChangeTime = ref(false)
  const changeOfTime = ref(props.detail[1].useStartTime)
  const handleChangeTime = () => {
    console.log('changeOfTime', changeOfTime.value)
    if (!changeOfTime.value) {
      Message.error('请选择换车时间')
      return
    }
    updateChangeCarTime({
      id: props.orderId, // 订单id
      replaceReturnId: props.detail[0].id, // 换上记录id
      replaceGiveId: props.detail[1].id, // 换下记录id
      replaceTime: changeOfTime.value, // 换车时间,
    })
      .then(() => {
        Message.success('修改换车时间成功')
        isChangeTime.value = false
      })
      .catch((err) => {
        console.log('修改换车时间失败: ', err)
        // changeOfTime.value = props.detail[1].useStartTime
      })
  }
  // 换车记录弹框
  const remarkVisible = ref(false)
  // 换车备注
  const replaceRemark = ref('')
  const showRemarkModel = () => {
    replaceRemark.value = props.detail[1].useStartRemark
    remarkVisible.value = true
  }
  // 提交修改换车备注
  const submitRemark = () => {
    let params = {
      id: props.detail[1].orderId, // 换车记录id
      replaceReturnId: props.detail[0].id, // 换上记录id
      replaceGiveId: props.detail[1].id, // 换下记录id
      replaceRemark: replaceRemark.value, // 换车备注,
    }
    updateRemarkLogApi(params).then((res) => {
      if (res.code == 200) {
        emit('getRemarkLists')
        Message.success('修改换车备注成功')
        remarkVisible.value = false
      }
    })
  }
</script>

<style lang="less" scoped>
  :deep(.upload-imag.upload-margin) {
    margin-top: 0;
  }
  .car-top {
    width: 100%;
    height: 40px;
    background: #f2f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .car-tlt {
      font-weight: 600;
      font-size: 14px;
    }
    .car-open {
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .car {
    border: 1px solid #f2f3f5;
    padding: 20px 20px;
    &-item {
      background-color: #f7f8fa;
      padding: 20px 20px;
      .car-msg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .car-updown {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 50%;
          .lic {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
          }
          .model {
            font-size: 14px;
            font-weight: 400;
          }
        }
      }
      .member-msg {
        display: flex;
        align-items: center;
        div {
          margin-right: 56px;
        }
        .msg-tlt {
          color: var(--color-neutral-10);
          span {
            color: var(--color-neutral-8);
          }
        }
        .msg-remark {
          // display: inline-block;
          flex: 1;
          max-width: 700px;
          word-wrap: break-word;
        }
      }
    }
    .section-item-header {
      font-weight: 500;
      font-size: 14px;
      color: #1d2129;
      padding: 12px 16px;
      background-color: #f2f3f5;
    }
    .section-item-content {
      border: 1px solid #f2f3f5;
      padding: 20px 20px;
      .label {
        display: inline-block;
        width: 171px;
        text-align: right;
        font-weight: 400;
        font-size: 14px;
        color: #4e5969;
      }
      :deep(.upload-imag .upload-margin) {
        margin-top: 0;
        margin-right: 0;
      }
    }
  }
</style>
